<template>
  <div class="tab-bar">
    <router-link to="/">
      <i class="icon icon-home2"></i>
      <span>首页</span>
    </router-link>
    <router-link to="/category">
      <i class="icon icon-command"></i>
      <span>分类</span>
    </router-link>
    <router-link to="/search">
      <i class="icon icon-feed"></i>
      <span>找一找</span>
    </router-link>
    <router-link to="/shoppingCat">
      <i class="icon icon-cart"></i>
      <span>购物车</span>
    </router-link>
    <router-link to="/userCenter">
      <i class="icon icon-user"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<style scoped lang="less">
  @import '../../common/less/variable';
  .tab-bar {
    display: flex;
    width: 100%;
    padding: 10px 0;
    position: fixed;
    z-index: 50;
    left: 0;
    bottom: 0;
    text-align: center;
    border-top: 1px solid @color-border;
    background-color: @color-background-d;
    .icon{
      font-size: @font-size-large;
      color: @color-dialog-background;
    }
    span{
      padding-top: 2px;
      display: block;
    }
    a {
      display: inline-block;
      flex: 1;
      font-size: @font-size-small;
      font-weight: bold;
      color: @color-text;
      &.router-link-exact-active {
        color: @color-text-d;
        .icon{
          color: @color-text-d;
        }
      }
    }
  }
</style>
